<div class="row">
    <div class="col-12">
        <div class="tabbable-custom">
            <div class="card">
                <div class="card-body">
                    <nav class="nav">
                        <ul class="nav nav-tabs d-flex align-items-center" id="tabs">
                            <li id="respo" class="nav-item" data-url="${request.contextPath}/manage/app/resource/redis/respo">
                                <a class="nav-link d-flex" href="?tab=respo&"><i class="bi bi-house-door"></i>仓库配置</a>
                            </li>
                            <li id="dir" class="nav-item" data-url="${request.contextPath}/manage/app/resource/redis/dir?searchName=${searchName!}">
                                <a class="nav-link d-flex" href="?tab=dir"><i class="bi bi-list-ul"></i>目录管理</a>
                            </li>
                            <li id="script" class="nav-item" data-url="${request.contextPath}/manage/app/resource/redis/script?searchName=${searchName!}">
                                <a class="nav-link d-flex" href="?tab=script"><i class="bi bi-file-earmark"></i>脚本管理</a>
                            </li>
                            <li id="redis" class="nav-item" data-url="${request.contextPath}/manage/app/resource/redis/redis?searchName=${searchName!}">
                                <a class="nav-link d-flex" href="?tab=redis"><i class="bi bi-folder2-open"></i>Redis资源管理</a>
                            </li>
                            <li id="tool" class="nav-item" data-url="${request.contextPath}/manage/app/resource/redis/tool?searchName=${searchName!}">
                                <a class="nav-link d-flex" href="?tab=tool"><i class="bi bi-folder2-open"></i>迁移工具管理</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <div class="tab-content" id="tabContent">
                <div class="tab-pane active" id="respoTab">
                </div>
                <div class="tab-pane" id="dirTab">
                </div>
                <div class="tab-pane" id="scriptTab">
                </div>
                <div class="tab-pane" id="redisTab">
                </div>
                <div class="tab-pane" id="toolTab">
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function showTab(tab) {
        $.get($("#" + tab).attr("data-url"), function (result) {
            $("#" + tab + "Tab").html(result);
        });
    }

    function refreshActiveTab() {
        var tab = getQueryString("tab");
        if (tab) {
            $("#" + tab + " a").addClass("active");
            $("#" + tab + "Tab").addClass("active").siblings().removeClass("active");
        } else {
            tab = "respo";
            $("#" + tab + " a").addClass("active");
        }
        showTab(tab);
        $("#tabs li a").tooltip({placement: "bottom"});
    }

    $(function () {
        refreshActiveTab();
    });

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
</script>